<template>
  <div class="order">
    <div class="header">
      <p v-for="(list,index) in header" :key="index" :class="{color:select == index}" @click="click_list($event,index)">{{list.name}}
        <span class="border" v-if="select == index"></span>
      </p>
    </div>
    <div class="da-box" v-if="order.length != 0">
      <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
      >
        <div class="item" @click="orderdetails(item.order_id)" v-for="(item,index) in order" :key="index">
          <div class="gray"></div>
          <div class="box">
            <div class="head">
              <div class="d1">订单编号：{{item.order_sn}}</div>
              <div class="d3" v-if="item.show_type == 'end'">已完成</div>
              <div class="d2" v-if="item.show_type == 'to_pay'">待付款</div>
              <div class="d2" v-if="item.show_type == 'to_ship'">待发货</div>
              <div class="d2" v-if="item.show_type == 'to_receipt'">待收货</div>
              <div class="d3" v-if="item.show_type == 'cancel'">已取消</div>
              <div class="d2" v-if="item.show_type == 'to_comment'">待评价</div>
            </div>
            <div class="zhong" v-for="(ite,ind) in item.goods_list" :key="ind">
              <div class="zhong-l">
                <img :src="ite.goods_thumb" />
              </div>
              <div class="zhong-r">
                <p class="r-tit">{{ite.goods_name}}</p>
                <div class="t-cont">
                  <p class="p1" v-if="ite.goods_attr != '' && ite.goods_price != '0.00'">{{ite.goods_attr}}</p>
                  <p class="p1" v-else></p>
                  <!-- <p class="p1" v-if="ite.goods_price">￥{{ite.goods_price}}</p> -->
                  <p class="p2">x{{ite.goods_number}}</p>
                </div>
              </div>
            </div>
            <div class="xia">
              <div></div>
              <div class="xia-div">共{{item.goods_count}}件商品&nbsp;&nbsp;合计&nbsp;￥{{item.goods_amount}}</div>
            </div>
            <div class="gopingjia">
              <div></div>
              <div class="faqu">
                <div class="quxiao" v-if="item.order_status == '0'" @click.stop="quxiao(item.order_id)">取消订单</div>
                <div class="fahuo" v-if="item.show_type == 'to_ship'">等待发货</div>
                <div class="fukuan" v-if="item.show_type == 'to_pay'">待付款</div>
                <div class="pingjia" v-if="item.show_type == 'to_comment'" @click.stop="pinglun(item.order_id)">去评价</div>
                <div class="shouhuo" @click.stop="queren(item.order_id)" v-if="item.show_type == 'to_receipt'">确认收货</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="da-box" v-else>
      <p class="zanwu">暂无订单</p>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        header:[
          {name:'全部',color:true},
          {name:'待付款',color:false},
          {name:'待发货',color:false},
          {name:'待收货',color:false},
          {name:'待评价',color:false}
        ],
        select: 0,
        type:'all',
        order:[],
        // 分页
        loading: false,
        finished: false,
        page:1
      }
    },
    created() {
      // this.getlist(1)
    },
    mounted(){
      if(this.$route.params.select == 0){
        this.select == this.$route.params.select
        this.type = 'all'
      }else if(this.$route.params.select == 1){
        this.select = this.$route.params.select
        this.type = 'to_pay'
      }else if(this.$route.params.select == 2){
        this.select = this.$route.params.select
        this.type = 'to_ship'
      }else if(this.$route.params.select == 3){
        this.select = this.$route.params.select
        this.type = 'to_receipt'
      }else if(this.$route.params.select == 4){
        this.select = this.$route.params.select
        this.type = 'to_comment'
      }
      this.getlist(1)
    },
    methods: {
      onLoad() {
        setTimeout(() => {
          this.page+=1
          this.getlist(this.page)
        }, 500);
      },
      // 订单略表
      getlist(page){
        this.$get("api/gzh_mine.php?action=order_list", {
          uid:localStorage.getItem('uid'),
          type:this.type,
          page:page
        }).then(res => { 
          console.log(res.data,'res.data')
          this.loading=false
          if(page==1){
              if(res.data.length==0){
                  this.finished=true
              }else{
                  this.order = res.data
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }else{
              if(res.data.length==0){
                  this.finished=true
              }else{
                  for (const key in res.data) {
                      this.order.push(res.data[key])
                  }
              }
              if(res.data.length>0&&res.data.length<10){
                  this.finished=true
                  // this.page = 1
              }
              
          }
        }).catch(err => {

        });
      },
      queren(id){
        this.$axios({
            method: "post",
            url: "api/gzh_mine.php?action=ar_order",
            data:this.$qs.stringify({
              uid:localStorage.getItem('uid'),
              order_id:id
            }),
            headers: {
                // 'Content-Type': 'application/x-www-form-urlencoded'
                // 'content-Type' : 'application/json'
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
        })
        .then(response => {
            console.log(response.data)
            if(response.data.error==0){
              this.$toast(response.data.msg);
              // this.$router.push({name:'my-order'})
              this.getlist(1)

            }else{
               this.$toast(response.data.msg);
            }
           
        })
      },
      quxiao(id){
        this.$axios({
            method: "post",
            url: "/api/gzh_mine.php?action=cancel_order",
            data:this.$qs.stringify({
              uid:localStorage.getItem('uid'),
              order_id:id
            }),
            headers: {
                // 'Content-Type': 'application/x-www-form-urlencoded'
                // 'content-Type' : 'application/json'
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            },
        })
        .then(response => {
            console.log(response.data)
            if(response.data.error==0){
              // this.$toast(response.data.msg);
              // this.$router.push({name:'my-order'})
              this.getlist(1)

            }else{
              //  this.$toast(response.data.msg);
            }
           
        })
      },
      orderdetails(id){
        this.$router.push({path:'/order-details',query:{"order_id":id}})
      },
      click_list(e, index) {
        if (index == 0) {
          this.select = 0;
          this.type = 'all'
          this.order = [];
          this.page = 1;
          this.loading = false;//下拉加载中
          this.finished = false;//下拉结束
          this.getlist(this.page)
        } else if (index == 1) {
          this.select = 1;
          this.type = 'to_pay'
          this.order = [];
          this.page = 1;
          this.loading = false;//下拉加载中
          this.finished = false;//下拉结束
          this.getlist(this.page)
        } else if (index == 2) {
          this.select = 2;
          this.type = 'to_ship'
          this.order = [];
          this.page = 1;
          this.loading = false;//下拉加载中
          this.finished = false;//下拉结束
          this.getlist(this.page)
        } else if (index == 3) {
          this.select = 3;
          this.type = 'to_receipt'
          this.order = [];
          this.page = 1;
          this.loading = false;//下拉加载中
          this.finished = false;//下拉结束
          this.getlist(this.page)
        } else if (index == 4) {
          this.select = 4;
          this.type = 'to_comment'
          this.order = [];
          this.page = 1;
          this.loading = false;//下拉加载中
          this.finished = false;//下拉结束
          this.getlist(this.page)
        }

      },
      // 跳转评论
      pinglun(id){
        this.$router.push({  //核心语句
          path:'/gopingjia',   //跳转的路径
          query:{            //路由传参时push和query搭配使用 ，作用时传递参数
            order_id:id ,  
          }
        })
      },
    },
  }
</script>

<style scoped>
.order{
  width: 100%;
  min-height: 100vh;
  background: #F9F9F9;
}
.header{
  width:100%;
  height:87px;
  background:rgba(255,255,255,1);
  border-top: 1PX solid #EFEFEF;
  display: flex;
  align-items: center;
  background: #fff;
}
.header p{
  width: 20%;
  height: 87px;
  line-height: 87px;
  text-align: center;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  position: relative;
}
.header p.color{
  color: #06A255;
}
.header p .border{
    width:36px;
    height:4px;
    background:rgba(6,162,85,1);
    border-radius:2px;
    position: absolute;
    bottom: 1px;
    left: 37%;
  }
/* for循环内容 */
.da-box{
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}
.item{
  width:100%;
  /* height:422px; */
  background: #fff;
}
.gray{
  width: 100%;
  height: 24px;
  background: #F9F9F9;
}
.box{
  width:100%;
  /* height:398px; */
}
.head{
  width: 100%;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.head .d1{
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(51,51,51,1);
  margin-left: 29px;
}
.head .d2{
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(240,104,118,1);
  margin-right: 32px;
}
.head .d3{
  font-size:28px;
  font-family:PingFang SC;
  font-weight:500;
  /* color:rgba(240,104,118,1); */
  color: #333;
  margin-right: 32px;
}
.zhong{
  width: 100%;
  height: 182px;
  background: #F9F9F9;
  display: flex;
  align-items: center;
}
.zhong-l{
  width: 109px;
  height: 109px;
  margin-right: 28px;
  margin-left: 29px;
}
.zhong-l img{
  width: 109px;
  height: 109px;
}
.zhong-r{
  width: 100%;
  padding-right: 32px;
  box-sizing: border-box;
}
.zhong-r .r-tit{
  font-size: 32px;
  color: #333;
}
.zhong-r .t-cont{
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zhong-r .t-cont .p1{
  font-size: 28px;
  color: #666;
  width: 500px;
}
.zhong-r .t-cont .p2{
  font-size: 30px;
  color: #333;
}
.xia{
  font-size: 28px;
  color: #333;
  width: 100%;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1PX solid #F9F9F9;
}
.xia .xia-div{
  margin-right: 32px;
}
.gopingjia{
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gopingjia .pingjia{
  width:146px;
  height:47px;
  background:rgba(6,162,85,0.38);
  border:1PX solid rgba(6,162,85,1);
  border-radius:24px;
  line-height: 47px;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(6,162,85,1);
  text-align: center;
  margin-right: 32px;
}
.gopingjia .fukuan{
  width:146px;
  height:47px;
  /* background:rgba(6,162,85,0.38);
  border:1PX solid rgba(6,162,85,1); */
  border-radius:24px;
  line-height: 47px;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  /* color:rgba(6,162,85,1); */
  color: #333;
  text-align: center;
  margin-right: 32px;
}
.gopingjia .fahuo{
  width:146px;
  height:47px;
  /* background:rgba(6,162,85,0.38);
  border:1PX solid rgba(6,162,85,1); */
  border-radius:24px;
  line-height: 47px;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  /* color:rgba(6,162,85,1); */
  color: #333;
  text-align: center;
  margin-right: 32px;
}
.gopingjia .shouhuo{
  width:146px;
  height:47px;
  background:rgba(6,162,85,0.38);
  border:1PX solid rgba(6,162,85,1);
  border-radius:24px;
  line-height: 47px;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(6,162,85,1);
  text-align: center;
  margin-right: 32px;
}
.gopingjia .quxiao{
  width:146px;
  height:47px;
  background:rgba(6,162,85,0.38);
  border:1PX solid rgba(6,162,85,1);
  border-radius:24px;
  line-height: 47px;
  font-size:30px;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(6,162,85,1);
  text-align: center;
  margin-right: 32px;
}
.faqu{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.zanwu{
  font-size: 28px;
  text-align: center;
  margin-top: 100px;
}
</style>
<style>
.van-list{
  height: 95vh;
}
</style>